Large List Handling এর জন্য FlatList এবং SectionList Optimization

React Native-এ FlatList এবং SectionList হল দুইটি শক্তিশালী কম্পোনেন্ট যা দীর্ঘ (large) তালিকা বা ডেটা প্রদর্শনের জন্য ব্যবহৃত হয়। তবে, যখন তালিকার ডেটা খুব বড় হয়, তখন অ্যাপের পারফরম্যান্সের ওপর বিরূপ প্রভাব পড়তে পারে। এই ধরনের পরিস্থিতিতে FlatList এবং SectionList এর অপ্টিমাইজেশন গুরুত্বপূর্ণ হয়ে ওঠে।

নিচে FlatList এবং SectionList এর ব্যবহার এবং অপ্টিমাইজেশনের জন্য কিছু টিপস দেওয়া হলো:

1. FlatList: Long List Optimization

FlatList একটি পারফরম্যান্স-অনুকূলিত (performance-optimized) কম্পোনেন্ট, যা লম্বা তালিকা গুলি ডাইনামিকভাবে রেন্ডার করতে ব্যবহৃত হয়। এটি virtualization ব্যবহার করে, অর্থাৎ, শুধুমাত্র স্ক্রীনে দৃশ্যমান (visible) আইটেমগুলি রেন্ডার করা হয়, যেগুলি স্ক্রীনে না থাকে সেগুলি রেন্ডার করা হয় না। এর ফলে, বড় ডেটার তালিকা রেন্ডার করা অনেক দ্রুত হয় এবং স্মৃতির ব্যবহারের পরিমাণও কমে।

FlatList Optimization Techniques:

1. KeyExtractor:
   keyExtractor একটি গুরুত্বপূর্ণ অপশন যেটি প্রতিটি আইটেমের জন্য একটি অনন্য কীগুলি নির্ধারণ করে, যা React Native কে আইটেম রেন্ডার করতে সাহায্য করে। এটি পারফরম্যান্স বাড়াতে সহায়ক।

   <FlatList
     data={data}
     keyExtractor={(item) => item.id.toString()}  // unique key for each item
     renderItem={renderItem}
   />

2. InitialNumToRender:
   initialNumToRender একটি প্রোপ যা প্রাথমিকভাবে কতগুলো আইটেম রেন্ডার করতে হবে তা নির্ধারণ করে। এর মান বেশি দিলে প্রথম লোডের সময় বেশি আইটেম রেন্ডার হবে এবং সিস্টেমে অনেক বেশি লোড হবে, তাই এটি যতটা সম্ভব কম রাখুন।

   <FlatList
     data={data}
     initialNumToRender={10}  // Only render 10 items initially
     renderItem={renderItem}
   />

3. MaxToRenderPerBatch:
   maxToRenderPerBatch একটি প্রোপ যা কতটা পরিমাণ আইটেম ব্যাচে রেন্ডার করা হবে তা নির্ধারণ করে। অধিক আইটেম একসাথে রেন্ডার করলে পারফরম্যান্সে প্রভাব পড়তে পারে, তাই এটিকে ১০-২০ এর মধ্যে রাখাই ভালো।

   <FlatList
     data={data}
     maxToRenderPerBatch={10}  // Render up to 10 items per batch
     renderItem={renderItem}
   />

4. WindowSize:
   windowSize প্রোপটি সাইজের পরিসীমা নির্ধারণ করে, যা virtualized তালিকাতে দেখা আইটেমের পরিসীমা দেখায়। এটি অ্যাপের পারফরম্যান্সের উপর প্রভাব ফেলে, অতএব, এটি সামঞ্জস্য করে ব্যবহার করা উচিত।

   <FlatList
     data={data}
     windowSize={5}  // Only render 5 items before and after the viewport
     renderItem={renderItem}
   />

5. Disable Virtualization:
   যদি আপনার তালিকা ছোট হয় বা Virtualization প্রয়োজন না হয়, তবে disableVirtualization ব্যবহার করে আপনি এটি নিষ্ক্রিয় করতে পারেন। তবে, এটি সাধারণত বড় তালিকার জন্য সুপারিশ করা হয় না।

   <FlatList
     data={data}
     disableVirtualization={true}  // Disable virtualization for smaller lists
     renderItem={renderItem}
   />

2. SectionList: Optimizing for Large Sections

SectionList React Native-এ বড় এবং গোষ্ঠীভুক্ত (grouped) ডেটা রেন্ডার করার জন্য ব্যবহৃত হয়। এটি সাধারাণভাবে একটি বড় তালিকার sections ব্যবহার করে এবং প্রতিটি সেকশনে আলাদা আলাদা আইটেম রেন্ডার করে।

SectionList Optimization Techniques:

1. KeyExtractor:
   keyExtractor অপশন ব্যবহার করে, প্রতিটি সেকশন এবং আইটেমের জন্য একটি ইউনিক কিও প্রদান করুন।

   <SectionList
     sections={sections}
     keyExtractor={(item, index) => item.id + index}
     renderItem={renderItem}
     renderSectionHeader={renderSectionHeader}
   />

2. InitialNumToRender:
   FlatList এর মতো, SectionList-এও initialNumToRender ব্যবহার করে প্রথমে কতগুলো সেকশন রেন্ডার করা হবে তা নির্ধারণ করা যায়।

   <SectionList
     sections={sections}
     initialNumToRender={5}  // Render the first 5 sections initially
     renderItem={renderItem}
     renderSectionHeader={renderSectionHeader}
   />

3. StickyHeaders:
   stickySectionHeadersEnabled ব্যবহার করে আপনি সেকশন হেডারটি স্ক্রলিংয়ের সময় উপরের দিকে স্থির রাখতে পারেন, যা ইউজার এক্সপেরিয়েন্স উন্নত করে।

   <SectionList
     sections={sections}
     stickySectionHeadersEnabled={true}  // Enable sticky headers
     renderItem={renderItem}
     renderSectionHeader={renderSectionHeader}
   />

4. MaxToRenderPerBatch:
   SectionList-এও maxToRenderPerBatch ব্যবহার করতে পারেন, যা আইটেমগুলোর পরিমাণ নিয়ন্ত্রণ করে, এবং বাচে রেন্ডার করা আইটেম সংখ্যা কম রাখে।

   <SectionList
     sections={sections}
     maxToRenderPerBatch={10}  // Render up to 10 items per batch
     renderItem={renderItem}
     renderSectionHeader={renderSectionHeader}
   />

5. WindowSize:
   windowSize প্রোপের মাধ্যমে আপনি SectionList এর স্ক্রলিং এ যে পরিসীমা দেখাতে চান তা নিয়ন্ত্রণ করতে পারবেন।

   <SectionList
     sections={sections}
     windowSize={7}  // Render 7 items before and after the viewport
     renderItem={renderItem}
     renderSectionHeader={renderSectionHeader}
   />

3. General List Optimization Tips

1. Avoid Inline Functions:
   renderItem এবং renderSectionHeader এর মতো ফাংশন গুলো Inline না লিখে আলাদা ফাংশন হিসেবে লিখুন। Inline ফাংশন পারফরম্যান্সে প্রভাব ফেলতে পারে কারণ প্রতিটি রেন্ডারে নতুন ফাংশন তৈরি হয়।

   const renderItem = ({ item }) => <Text>{item.title}</Text>;
   const renderSectionHeader = ({ section }) => <Text>{section.title}</Text>;

2. Memoization:
   আপনি React.memo বা useCallback ব্যবহার করে ফাংশন গুলো মেমোইজ করতে পারেন, যা বারবার রেন্ডার হওয়ার প্রয়োজনীয়তা কমিয়ে দেয়।

   const renderItem = useCallback(({ item }) => <Text>{item.title}</Text>, []);

3. Optimize Data Structure:
   বড় তালিকার ক্ষেত্রে ডেটা স্ট্রাকচারও গুরুত্বপূর্ণ। এক্সেস টাইম এবং মেমোরি ব্যবহারের জন্য কার্যকরী ডেটা স্ট্রাকচার নির্বাচন করা উচিত।
4. Use Pagination or Lazy Loading:
   Pagination বা Lazy Loading ব্যবহার করে ডেটার পরিমাণ সীমিত রাখতে পারেন। প্রথমে কিছু আইটেম রেন্ডার করে তারপর বাকি আইটেমগুলি লোড করতে পারেন যখন ইউজার স্ক্রল করবে।

সারাংশ

• FlatList এবং SectionList হল বড় তালিকা হ্যান্ডলিংয়ের জন্য React Native-এর শক্তিশালী কম্পোনেন্ট।
• FlatList একক ডেটা তালিকা ব্যবস্থাপনার জন্য উপযুক্ত এবং SectionList বড় ডেটা গোষ্ঠীভুক্ত (grouped) করার জন্য ব্যবহৃত হয়।
• পারফরম্যান্স অপ্টিমাইজেশনের জন্য keyExtractor, initialNumToRender, maxToRenderPerBatch, stickySectionHeadersEnabled, memoization ইত্যাদি ব্যবহার করা যায়।
• ডেটার পরিমাণ বেশি হলে virtualization, pagination, এবং lazy loading এর মতো কৌশলগুলোও প্রয়োগ করা যেতে পারে।

এই কৌশলগুলি ব্যবহার করে আপনি বড় তালিকা এবং সেকশনগুলোর রেন্ডারিংয়ের পারফরম্যান্স দক্ষভাবে ম্যানেজ করতে পারেন।